<template>
	<view class="content" :style="{ '--width': windowWidth, '--height': windowHeight }">
		<!-- <view class="bg" v-if="!butStatus && fzBtnStatus"></view> -->

		<view class="nav" v-if="!butStatus && fzBtnStatus">
			<uni-icons type="left" size="26" @click="clickLeft"></uni-icons>
			<view class="navbtn" @click="clickRight">
				<image src="../../static/icon/icon8.png" mode="heightFix"></image>
				<text>屏幕翻转</text>
			</view>
		</view>

		<swiper
			v-if="!lockOrientationStatus"
			class="swiper"
			circular
			:current="current"
			:indicator-dots="false"
			:autoplay="autoplay"
			:interval="interval"
			:duration="100"
			touchable
			:disable-touch="disabletouch"
			@change="swiperchange"
			@click="clickFzchange(1)"
			:style="{ with: windowWidth + 'px', height: windowHeight + 'px' }"
		>
			<swiper-item v-for="(item, index) in imageList" :key="index">
				<canvasgraffiti v-if="butStatus" :canvasId="`firstCanvas${index}`" :bgImg="item.url" @change="upDetail"></canvasgraffiti>
				<view v-else class="swiper-item">
					<image class="img2" :src="item.url" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="scrollbox" v-else>
			<view class="scrollbox_1" @click="clickFzchange(2)">
				<yScrollSeamless :options="{ direction: direction, step: intervalNumber2, hoverStop: hoverStop }">
					<view class="demo-y" v-for="(item, index) in imageList" :key="index">
						<image class="img1" :src="item.url" mode="widthFix"></image>
					</view>
				</yScrollSeamless>
			</view>
			<view class="sliderbox">
				<pp-slider :vertical="true" :value="intervalNumber2" :min="0.1" :max="2" :block-size="20" :lineSize="20" @changing="sliderChange" />
			</view>
		</view>

		<view class="box1" v-if="!lockOrientationStatus && fzBtnStatus">
			<view class="dot" v-if="!butStatus">
				<text>{{ current + 1 }}/{{ imageList.length }}</text>
				<image src="../../static/icon/icon3.png" mode="" @click="playSwiper"></image>
			</view>
			<view class="btns" v-if="!autoplay && !butStatus">
				<view class=""></view>
				<view class="btn1" @click="changeBtns(true)">乐谱编辑</view>
			</view>
		</view>

		<!-- 竖屏滚动时间间隔 -->
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0" :is-mask-click="false">
			<view class="popbox">
				<uni-icons class="btn" type="closeempty" size="15" color="#102D40" @click="changInterval(false)"></uni-icons>
				<view class="pop_title">切换时间间隔</view>
				<view class="pop_input">
					<input type="number" placeholder="请输入自动切换时间间隔(秒)" v-model="intervalNumber" />
				</view>
				<view class="btn1" @click="changInterval(true)">保存</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import API from '@/utils/api.js';
import { pathToBase64, base64ToPath } from 'image-tools';
import canvasgraffiti from '../../components/canvasgraffiti.vue';
import yScrollSeamless from '../../components/y-scroll-seamless/y-scroll-seamless.vue';
const bindingx = uni.requireNativePlugin('bindingx');
export default {
	components: {
		canvasgraffiti,
		yScrollSeamless
	},
	computed: {
		windowWidth() {
			return uni.getSystemInfoSync().screenWidth;
		},
		windowHeight() {
			return uni.getSystemInfoSync().screenHeight;
		}
	},
	data() {
		return {
			butStatus: false,
			autoplay: false,
			interval: 3000,
			intervalNumber: 0,
			disabletouch: false,
			current: 0,
			imageId: 0,
			imageList: [],

			lockOrientationStatus: false,

			// 硬件起始坐标
			keyStartX: 0,

			infoData: {},

			debouncedMouseup1: null,
			throttleTimer: null,

			scrollTop: 1,
			keyStartY1: 0,

			imagesnum: 0,

			intervalNumber2: 0.5,
			scrollTimer: null,

			fzBtnStatus: true,

			direction: 'up',
			hoverStop: false
		};
	},
	watch: {},
	onLoad(e) {
		plus.key.addEventListener('keyup', this.keypress, false);

		this.imageId = e.id;
		this.getDetail();
	},
	onShow() {
		this.intervalNumber2 = 0.5;
	},
	onBackPress() {
		clearInterval(this.scrollTimer);
		this.scrollTimer = null;
		this.imagesnum = 9999999;
	},
	onUnload() {
		plus.screen.unlockOrientation(); //解除锁定屏幕方向
		plus.screen.lockOrientation('portrait-primary');
	},
	methods: {
		// 按键监听
		keypress(e) {
			console.log('按下的按键', e);
			let key = e.keyCode;
			if (key == 19) {
				console.log('上', this.intervalNumber2);
				this.direction = 'up';
				this.hoverStop = true;
				clearInterval(this.scrollTimer);
				this.scrollTimer = null;
				this.scrollTimer = setInterval(() => {
					this.hoverStop = false;
					clearInterval(this.scrollTimer);
					this.scrollTimer = null;
				}, 1100);
			}
			if (key == 20) {
				console.log('下', this.intervalNumber2);
				this.direction = 'down';
				this.hoverStop = true;
				clearInterval(this.scrollTimer);
				this.scrollTimer = null;
				this.scrollTimer = setInterval(() => {
					this.hoverStop = false;
					clearInterval(this.scrollTimer);
					this.scrollTimer = null;
				}, 1100);
			}
			if (key == 21) {
				console.log('左');
				this.current = (this.current + 1) % this.imageList.length;
			}
			if (key == 22) {
				console.log('右');
				this.current = (this.current - 1 + this.imageList.length) % this.imageList.length;
			}
		},

		// 预览
		changePreview(index) {
			let data = this.imageList.map((e) => e.url);
			let promise = [];
			for (let i = 0; i < data.length; i++) {
				promise.push(base64ToPath(data[i]));
			}
			Promise.all(promise).then((res) => {
				uni.previewImage({
					current: index,
					urls: res
				});
			});
		},

		// 屏幕点击
		clickFzchange(val) {
			if (this.butStatus) return;
			this.fzBtnStatus = !this.fzBtnStatus;
			if (val == 2) {
				this.hoverStop = !this.hoverStop;
				this.direction = 'up';
			}
		},

		// 返回
		clickLeft() {
			plus.screen.unlockOrientation(); //解除锁定屏幕方向
			plus.screen.lockOrientation('portrait-primary');
			this.imagesnum = 9999999;
			this.lockOrientationStatus = false;
			clearInterval(this.scrollTimer);
			this.scrollTimer = null;
			uni.navigateBack();
		},

		// 屏幕切换
		clickRight() {
			if (!this.lockOrientationStatus) {
				plus.screen.unlockOrientation(); //解除锁定屏幕方向
				plus.screen.lockOrientation('landscape-primary');
				this.lockOrientationStatus = true;
				this.butStatus = false;
				this.fzBtnStatus = false;
				this.hoverStop = true;
			} else {
				plus.screen.unlockOrientation(); //解除锁定屏幕方向
				plus.screen.lockOrientation('portrait-primary');
				this.lockOrientationStatus = false;
				clearInterval(this.scrollTimer);
				this.scrollTimer = null;
				this.hoverStop = false;
			}
			this.direction = 'up';
		},

		// 设置滚动速度
		sliderChange(e) {
			console.log(e, '滚动条');
			this.intervalNumber2 = e == 0 ? 0.1 : e;
		},

		// 轮播图切换
		swiperchange(e) {
			this.current = e.target.current;
		},

		// 播放、暂停播放
		playSwiper() {
			if (this.autoplay) {
				this.butStatus = false;
				this.autoplay = false;
			} else {
				this.intervalNumber = this.interval / 1000;
				this.$refs.popup1.open();
			}
		},

		// 设置自动播放时间间隔
		changInterval(type) {
			if (type) {
				this.interval = this.intervalNumber * 1000;
				this.autoplay = true;
			}
			this.$refs.popup1.close();
		},

		// 画板保存、取消
		changeBtns(status, val) {
			this.butStatus = status;
			this.disabletouch = status;
		},

		// 更新数据详情
		upDetail(e) {
			this.butStatus = false;
			this.disabletouch = false;
			if (!e) return;
			this.imageList[this.current].url = e;
			API.createFlie(this.imageList[this.current], `${this.infoData.id}${this.imageList[this.current].id}`).then(
				(res) => {
					console.log(res, '更新的数据');
					uni.showToast({
						icon: '',
						title: '更新成功'
					});
				},
				(err) => {
					uni.showToast({
						icon: '',
						title: '更新失败'
					});
				}
			);
		},

		// 查询详情
		getDetail() {
			API.getSongById(this.imageId).then((res) => {
				console.log(res, '查询的详情');
				this.infoData = res;
				this.getImageData(res);
			});
		},

		// 查询图片数据
		getImageData(res) {
			console.log('查询的id', res);
			uni.showLoading({
				title: '读取中...'
			});
			let arr = res.urls.split(',');
			this.getImgData(`${this.infoData.id}${arr[this.imagesnum]}`);
		},

		getImgData(path) {
			let arr = this.infoData.urls.split(',');
			if (this.imagesnum >= arr.length) {
				// uni.hideLoading();
			} else {
				API.getFileData(path).then(
					(res) => {
						console.log('查询的Json文件', res);
						this.imagesnum += 1;
						this.imageList.push(res);
						uni.hideLoading();
						this.getImgData(`${this.infoData.id}${arr[this.imagesnum]}`);
					},
					(err) => {
						uni.hideLoading();
						uni.showToast({
							icon: '',
							title: '没有乐谱'
						});
						console.log('没有文件');
					}
				);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	overflow-x: hidden;

	// .bg {
	// 	width: calc(100vw + 270rpx);
	// 	height: 282rpx;
	// 	background-color: rgba(23, 183, 109, 0.61);
	// 	filter: blur(180rpx);
	// 	position: absolute;
	// 	top: 0rpx;
	// 	left: -210rpx;
	// 	z-index: 1;
	// }

	.nav {
		width: 100vw;
		height: calc(30px + var(--status-bar-height));
		padding: var(--status-bar-height) 25px 0 25px;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;

		.navbtn {
			width: max-content;
			height: 100%;
			background: #17b76d;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 10px;

			image {
				height: 20px;
				margin-right: 10px;
			}

			text {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 16px;
				color: #ffffff;
			}
		}
	}

	.scrollbox {
		width: 100vw;
		height: 100vh;
		position: relative;

		.scrollbox_1 {
			width: 100%;
			height: 100%;
			overflow-y: auto;

			.img1 {
				width: 100vw;
			}
		}

		.sliderbox {
			height: 50%;
			position: absolute;
			right: 10px;
			bottom: 0;
			z-index: 999;
			//旋转
			// transform: rotate(180deg);
			// background-color: rgba(0, 0, 0, 0.5);
		}
	}

	.swiper {
		.swiper-item {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 3;
			text-align: center;
			overflow: auto;
			display: flex;
			align-items: center;

			.img2 {
				width: 100%;
			}
		}
	}

	.box1 {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 5;
		padding: 0 10px;

		.dot {
			margin: 10px 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				padding: 0 10px;
				border: 1px solid rgb(128, 220, 176);
				border-radius: 2px;
				color: rgb(128, 220, 176);
			}

			image {
				width: 25px;
				height: 25px;
				border-radius: 50%;
				margin-top: 10px;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btns_l,
			.btns_r {
				display: flex;
				align-items: center;
			}

			.btns_l {
				image {
					height: 30px;
					margin-right: 25px;
				}
			}

			.btns_r {
				view {
					width: 70px;
					height: 30px;
					border-radius: 10px;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 16px;
					color: #ffffff;
					line-height: 30px;
					text-align: center;
				}

				view:nth-child(1) {
					background: #17b76d;
				}

				view:nth-child(2) {
					background: #2b2b2b;
					margin-left: 20rpx;
				}
			}

			.btn1 {
				width: 112px;
				height: 30px;
				background: #17b76d;
				border-radius: 12rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 18px;
				color: #ffffff;
				line-height: 30px;
				text-align: center;
			}
		}
	}

	.popbox {
		width: 100%;
		height: 239px;
		background: #ffffff;
		border-radius: 20px 20px 0px 0px;
		padding: 0 37px;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;

		.btn {
			position: absolute;
			top: 15px;
			right: 20px;
		}

		.pop_title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 18px;
			color: #000000;
			line-height: 26px;
			text-align: center;
		}

		.pop_input {
			width: 100%;
			height: 46px;
			background: #ffffff;
			border-radius: 8px;
			border: 1px solid #c4c4c4;
			padding: 0 15px;

			input {
				width: 100%;
				height: 45px;
			}
		}

		.btn1 {
			width: 100%;
			height: 46px;
			background: #17b76d;
			border-radius: 8px;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 16px;
			color: #ffffff;
			line-height: 46px;
			text-align: center;
		}
	}
}
</style>
